<h1 class="demo-title">角标</h1>

<div class="demo-panel">
<div class="clearfix" style="height: 130px;">
    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-svip tag-right-bottom">
            </div>
        </div>
    </div>

    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-vip tag-right-bottom">
            </div>
        </div>
    </div>
</div>

<p>对应的html代码如下：</p>
   <pre lang-prism class="language-html">
    <code class="language-html">
        &lt;div class="tag-svip tag-right-bottom"&gt;&lt;/div&gt;
        &lt;div class="tag-vip tag-right-bottom"&gt;&lt;/div&gt;
    </code>
    </pre>

<!--<textarea  class="prehtml-textarea" cols="80" rows="4">-->
    <!--<div class="tag-svip tag-right-bottom"> </div>-->
    <!--<div class="tag-vip tag-right-bottom"> </div>-->
<!--</textarea>-->
<br><br>
<div class="clearfix">
    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-free tag-right-bottom">
            </div>
        </div>

    </div>
    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-freelimit tag-right-bottom">
            </div>
        </div>

    </div>
    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-last tag-right-bottom">
            </div>
        </div>

    </div>
    <div class="col-2">
        <div class="tag-wrap">
            <div class="tag-limit tag-right-bottom">
            </div>
        </div>

    </div>

</div>
<br /><br />
<div class="clearfix">
    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-act tag-right-bottom">
            </div>
        </div>

    </div>
    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-xy tag-right-bottom">
            </div>
        </div>
    </div>
</div>
<br>  <p>对应的html代码如下：</p>
<pre lang-prism class="language-html">
    <code class="language-html">
        &lt;div class="tag-free tag-right-bottom"&gt;&lt;/div&gt;
        &lt;div class="tag-freelimit tag-right-bottom"&gt;&lt;/div&gt;
        &lt;div class="tag-last tag-right-bottom"&gt;&lt;/div&gt;
        &lt;div class="tag-limit tag-right-bottom"&gt;&lt;/div&gt;
        &lt;div class="tag-act tag-right-bottom"&gt;&lt;/div&gt;
        &lt;div class="tag-xy tag-right-bottom"&gt;&lt;/div&gt;
    </code>
 </pre>

<!--<textarea  class="prehtml-textarea" cols="80" rows="14">-->
    <!--<div class="tag-free tag-right-bottom">-->
    <!--</div>-->
    <!--<div class="tag-freelimit tag-right-bottom">-->
    <!--</div>-->
    <!--<div class="tag-last tag-right-bottom">-->
    <!--</div>-->
    <!--<div class="tag-limit tag-right-bottom">-->
    <!--</div>-->
    <!--<div class="tag-act tag-right-bottom">-->
    <!--</div>-->
    <!--<div class="tag-xy tag-right-bottom">-->
    <!--</div>-->

<!--</textarea>-->
<br><br>
<div class="clearfix">
    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-hot tag-left-top">
            </div>
        </div>

    </div>
    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-hot tag-hot-sm tag-left-top">
            </div>
        </div>

    </div>
    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-pop-hot tag-left-top">
            </div>
        </div>

    </div>

    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-new tag-left-top">
            </div>
        </div>

    </div>


</div>
<br><br>
<div class="clearfix">
    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-new tag-new-sm tag-left-top">
            </div>
        </div>

    </div>
    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-pop-new tag-left-top">
            </div>
        </div>

    </div>
</div>

<br>  <p>对应的html代码如下：</p>
<pre lang-prism class="language-html">
    <code class="language-html">
        &lt;div class="tag-hot tag-left-top"&gt;&lt;/div&gt;
        &lt;div class="tag-hot tag-hot-sm tag-left-top"&gt;&lt;/div&gt;
        &lt;div class="tag-pop-hot tag-left-top"&gt;&lt;/div&gt;
        &lt;div class="tag-new tag-left-top"&gt;&lt;/div&gt;
        &lt;div class="tag-new tag-new-sm tag-left-top"&gt;&lt;/div&gt;
        &lt;div class="tag-pop-new tag-left-top"&gt;&lt;/div&gt;
    </code>
 </pre>
<!--<textarea  class="prehtml-textarea" cols="80" rows="14">-->
    <!--<div class="tag-hot tag-left-top">-->
    <!--</div>-->
    <!--<div class="tag-hot tag-hot-sm tag-left-top">-->
    <!--</div>-->
    <!--<div class="tag-pop-hot tag-left-top">-->
    <!--</div>-->
    <!--<div class="tag-new tag-left-top">-->
    <!--</div>-->
    <!--<div class="tag-new tag-new-sm tag-left-top">-->
    <!--</div>-->
    <!--<div class="tag-pop-new tag-left-top">-->
    <!--</div>-->
<!--</textarea>-->
<br><br>
<div class="clearfix">
    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-new tag-left-top"></div>
            <div class="tag-selected"></div>
        </div>
    </div>

    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-selected"></div>
            <div class="tag-vip tag-right-bottom">  </div>
        </div>
    </div>
</div>

<br>  <p>对应的html代码如下：</p>
<pre lang-prism class="language-html">
    <code class="language-html">
        &lt;ddiv class="tag-wrap"&gt;
            &lt;div class="tag-new tag-left-top"&gt;&lt;/div&gt;
            &lt;div class="tag-selected"&gt;&lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="tag-wrap"&gt;
            &lt;div class="tag-selected"&gt;&lt;/div&gt;
            &lt;div class="tag-vip tag-right-bottom"&gt;&lt;/div&gt;
        &lt;/div&gt;
    </code>
 </pre>
<!--<textarea  class="prehtml-textarea" cols="80" rows="11">-->
    <!--<div class="tag-wrap">-->
        <!--<div class="tag-new tag-left-top"></div>-->
        <!--<div class="tag-selected"></div>-->
    <!--</div>-->

    <!--<div class="tag-wrap">-->
        <!--<div class="tag-selected"></div>-->
        <!--<div class="tag-vip tag-right-bottom">  </div>-->
    <!--</div>-->

<!--</textarea>-->
<br><br>
<div class="clearfix">
    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-used tagafter-right-top"></div>
        </div>

    </div>

    <div class="col-3">
        <div class="tag-wrap">
            <div class="tag-overdue tagafter-right-top"></div>
        </div>
    </div>
</div>
<br>  <p>对应的html代码如下：</p>
<pre lang-prism class="language-html">
    <code class="language-html">
        &lt;div class="tag-used tagafter-right-top"&gt;&lt;/div&gt;
        &lt;div class="tag-overdue tagafter-right-top"&gt;&lt;/div&gt;
    </code>
 </pre>
<!--<textarea  class="prehtml-textarea" cols="80" rows="4">-->
    <!--<div class="tag-used tagafter-right-top"></div>-->
    <!--<div class="tag-overdue tagafter-right-top"></div>-->
<!--</textarea>-->
</div>